
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
	select{width:100px;height:85px;}
	div{display:inline-block;width:50px}
</style>

</head>
<body>
	<!--假设两个select元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
    包括：当个选中项左右移动
              多个选中项左右移动
              全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
	<select id="unsel" size="5" multiple>
		<option>Argentina</option>
		<option>Brazil</option>
		<option>Canada</option>
		<option>Chile</option>
		<option>China</option>
		<option>Cuba</option>
		<option>Denmark</option>
		<option>Egypt</option>
		<option>France</option>
		<option>Greece</option>
		<option>Spain</option>
	</select>
	<div>
		<button id="btn1">&gt;&gt;</button>
		<button id="btn">&gt;</button>
		<button id="btn2">&lt;</button>
		<button id="btn4">&lt;&lt;</button>
	</div>
	<select id="sel" size="5" multiple>
	</select>
	
	<script type="text/javascript">
		var arr1=[];
		var arr2=[];
		var arr3=[];
		var str2;
		var str3;
//		var txt;
		 options_one=document.querySelectorAll("option");
		 options_two=document.querySelectorAll("option");
		 options_onex=unsel.querySelectorAll("option");
		 options_twox=sel.querySelectorAll("option");
//		console.log(options_one);
		for(let i=0;i<options_one.length;i++){
			arr1.push(options_one[i].innerText);
		}
//		console.log(arr1);	
		//左边全部元素移到右边
		var str="<option>"+arr1.join("</option><option>")+"</option>";
		btn1.onclick=function(){
			sel.innerHTML=str;
			unsel.innerHTML="";
			options_two=sel.querySelectorAll("option");
			options_twox=sel.querySelectorAll("option");
			console.log(options_two);
		}
		
		//右边全部元素移到左边
		btn4.onclick=function(){
			sel.innerHTML="";
			unsel.innerHTML=str;
			options_one=unsel.querySelectorAll("option");
			options_onex=unsel.querySelectorAll("option");
			console.log(options_one);
		}
		
		//从左边选择元素去右边				
//		for(var j=0;j<options_onex.length;j++){
//			options_onex[j].onclick=function(){
////				console.log(this);
////				options_one=unsel.querySelectorAll("option");
//				if(this.selected==true){	
////					for(var k=0;k<options_onex.length;k++){
////						options_onex[k].className="";
////					}
//					this.className="check"
//					right_move(this);
//			}			
//			}											
//		}
//		
//		//从右边选择元素去左边
//		for(var j=0;j<options_twox.length;j++){
//			options_twox[j].onclick=function(){
//				console.log(this);
//				options_twox=unsel.querySelectorAll("option");
//				if(this.selected==true){	
////					for(var k=0;k<options_onex.length;k++){
////						options_onex[k].className="";
////					}
//					this.className="check"
//					left_move(this);
//			}			
//			}											
//		}
//		
//		function left_move(txt){
//				if(arr3.indexOf(txt.innerHTML)==-1){
//				     arr3.push(txt.innerText);												
//			     }
////			arr3=arr3.sort(function(s,t){
////					var a=s.toLowerCase();
////					var b=t.toLowerCase();
////					if(a<b) return -1;
////					if(a>b) return 1;
////					return 0;
////				})
//				arr3.sort();
//				console.log(arr3);
//				str3="<option>"+arr3.join("</option><option>")+"</option>";
////				console.log(str2);
//		}
//		
//		function right_move(txt){
//				
//		if(arr2.indexOf(txt.innerHTML)==-1){
//			arr2.push(txt.innerText);												
//		}
//		arr2=arr2.sort(function(s,t){
//				var a=s.toLowerCase();
//				var b=t.toLowerCase();
//				if(a<b) return -1;
//				if(a>b) return 1;
//				return 0;
//			})
//			console.log(arr2);
//			str2="<option>"+arr2.join("</option><option>")+"</option>";
////			console.log(str2);
//		}
		
		btn2.onclick=function(){			
			options2=sel.querySelectorAll("option");
			options1=unsel.querySelectorAll("option");
			arr = [];			
//			unsel.innerHTML=str3;
			for(var p=0;p<options2.length;p++){
				if(options2[p].selected){
					arr.push(options2[p].innerHTML);
					options2[p].remove();
//					options_twox[p].style.display="none";
				}
			}
			
//			options1.forEach(value => 
//				arr.push(value.innerHTML)
//			)				
//			console.log(arr);	
			for(var l=0;l<options1.length;l++){
				arr.push(options1[l].innerHTML);
			}
			unsel.innerHTML ="";
			
			
			
//			arr.sort().forEach(value => 
//				unsel.add(new Option(value))
//			)


//			arr.sort().forEach(function(value,i,arr){
//					unsel.add(new Option(value));
//			})		


//			arr.sort().forEach(value) 
//				{
//					unsel.add(new Option(value));
//				}
//			)
//			
//			

			
			arr.sort();
			for(var k=0;k<arr.length;k++){				
				unsel.add(new Option(arr[k]));												
			}
		}
				
		btn.onclick=function(){
//			sel.innerHTML=str2;
//			console.log(sel.innerHTML);
//			for(var p=0;p<options_one.length;p++){
//				if(options_one[p].className=="check"){
//					options_one[p].style.display="none";
//				}
//			}

			options2=sel.querySelectorAll("option");
			options1=unsel.querySelectorAll("option");
			arr = [];			
//			unsel.innerHTML=str3;
			for(var p=0;p<options1.length;p++){
				if(options1[p].selected){
					arr.push(options1[p].innerHTML);
					options1[p].remove();
//					options_twox[p].style.display="none";
				}
			}
			
			options2.forEach(value => 
				arr.push(value.innerHTML)
			)				
			console.log(arr);			
			sel.innerHTML ="";			
			arr.sort().forEach(value => 
				sel.add(new Option(value))
			)

		}
		
	</script>
</body>
</html>
